<template>
  <div v-loading.lock="loading" id="categoryManager">
    <el-table
      :data="tableData"
      height="572px"
      style="background-color: #ffffff00"
    >
      <el-table-column prop="categoryName" label="分类名"> </el-table-column>
      <el-table-column
        prop="noteCount"
        label="笔记数量"
        header-align="center"
        align="center"
        width="80"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        width="106"
        header-align="center"
        align="center"
      >
        <template slot-scope="scope">
          <el-popover placement="top" width="225" @show="categoryNameMod = ''">
            <el-input
              v-model="categoryNameMod"
              autocomplete="off"
              maxlength="10"
              show-word-limit
              prefix-icon="el-icon-document-add"
              :placeholder="scope.row.categoryName"
            ></el-input>
            <div style="text-align: right; margin-top: 5px">
              <el-button size="mini" type="text" @click="closeEdit"
                >取消</el-button
              >
              <el-button
                type="success"
                size="mini"
                @click="editCategory(scope.row)"
                >确定</el-button
              >
            </div>
            <el-button
              type="primary"
              icon="el-icon-edit-outline"
              slot="reference"
              circle
              size="mini"
            ></el-button>
          </el-popover>
          <el-popconfirm
            icon-color="green"
            confirm-button-type="success"
            @confirm="downloadNotes(scope.row)"
            title="将会下载分类下的所有笔记,确认吗?"
          >
            <el-button
              type="warning"
              icon="el-icon-download"
              circle
              slot="reference"
              size="mini"
              :disabled="scope.row.noteCount == 0"
            ></el-button>
          </el-popconfirm>

          <el-popconfirm
            icon-color="red"
            confirm-button-type="danger"
            @confirm="deleteCategory(scope.row)"
            title="将会删除这个分类,确认吗?"
          >
            <el-button
              type="danger"
              icon="el-icon-minus"
              circle
              slot="reference"
              size="mini"
              :disabled="scope.row.noteCount > 0"
            ></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-popover
      placement="top"
      width="225"
      @show="categoryName = ''"
      v-model="dialogAddVisible"
      ref="addCat"
    >
      <el-input
        v-model="categoryName"
        autocomplete="off"
        maxlength="10"
        show-word-limit
        prefix-icon="el-icon-document-add"
        placeholder="在此输入类别名"
      ></el-input>
      <div style="text-align: right; margin-top: 5px">
        <el-button size="mini" type="text" @click="dialogAddVisible = false"
          >取消</el-button
        >
        <el-button type="primary" size="mini" @click="addCategory"
          >确定</el-button
        >
      </div>
      <el-button
        type="primary"
        icon="el-icon-plus"
        round
        size="medium"
        slot="reference"
        style="margin-top: 3px;background-color: #00b6d37d;border-color: #e7350085;"
      >添加分类</el-button>
    </el-popover>
  </div>
</template>

<script>
import axios from "@/util/AxiosUtil";
import apis from "@/util/ApiUrls";
export default {
  created() {
    this.getData();
     // 监听分类管理组件的删除事件
    this.$EventBus.$on("table_category_changed", () => {
      // 刷新数据
     this.getData();
    })
  },
  methods: {
    // 表格中的popover绑定v-model后无法通过属性设置隐藏显示,所以折中方法
    closeEdit() {
      document.body.click();
    },
    // 打开添加类别的弹框
    addCategory() {
      if (this.categoryName === undefined || this.categoryName.trim() === "") {
        this.$message({
          message: "你还没有输入任何东西",
          type: "warning",
          duration: 1000,
        });
        return;
      }

      // 分类上限数量
      if (this.tableData.length > 25) {
        this.$notify({
          title: "警告",
          message: "每个用户最大只能创建25个分类",
          position: "bottom-right",
          type: "warning",
          duration: 1500,
        });
        return;
      }

      this.loading = true;
      axios
        .post(apis.api_article.category, {
          categoryName: this.categoryName,
          categoryId: undefined,
        })
        .then((res) => {
          // 成功后将新建的类别加入下拉菜单
          this.$message({
            message: "创建完成~",
            type: "success",
            duration: 1200,
          });
          this.dialogAddVisible = false;
          // 重新加载数据
          this.getData();
          // 传递事件-饼图组件监听后刷新数据
          this.$EventBus.$emit("pie_category_changed", undefined);
        })
        .catch((e) => {
          let msg = e.msg;
          if (e.code === 202) {
            msg = "分类已经创建过了~考虑换个名字?";
          }
          this.$notify({
            title: "警告",
            message: msg,
            type: "warning",
            position: "bottom-right",
            duration: 1500,
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 请求数据
    getData() {
      // 请求用户的分类以及对应的笔记数量信息
      axios
        .get(apis.api_article.categoryGroup)
        .then((res) => {
          this.tableData = res.data;
        })
        .catch((e) => {
          this.$notify({
            title: "警告",
            message: "分类信息获取失败:" + e.msg,
            type: "warning",
            position: "bottom-right",
            duration: 1500,
          });
        });
    },
    // 下载分类
    downloadNotes(row) {
      this.loading = true;
      axios.post(apis.api_article.downloadCategory + "/" + row.categoryId, undefined, {responseType: 'blob'}).then(() => {
        this.$message({
          message: '下载完成',
          type: 'success'
        });
      }).catch(e => {
        this.$message({
          message: '下载失败',
          type: 'warning'
        });
      }).finally(() => {
        this.loading = false;
      });
    },
    // 删除分类
    deleteCategory(row) {
      this.loading = true;
      axios
        .delete(apis.api_article.category + "?categoryId=" + row.categoryId)
        .then((res) => {
          this.$message({
            message: "已删除[" + row.categoryName + "]~",
            duration: 1500,
            type: "success",
          });

          // 刷新数据
          this.getData();

          // 传递事件-饼图组件监听后刷新数据
          this.$EventBus.$emit("pie_category_changed", undefined);
        })
        .catch((e) => {
          console.log(e);
          this.$notify({
            title: "警告:删除分类失败",
            message: e.msg,
            type: "warning",
            position: "bottom-right",
            duration: 1500,
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 编辑分类名
    editCategory(row) {
      this.loading = true;
      axios
        .put(apis.api_article.category, {
          categoryId: row.categoryId,
          categoryName: this.categoryNameMod,
        })
        .then((res) => {
          this.$message({
            message:
              "已修改[" +
              row.categoryName +
              "]为[" +
              this.categoryNameMod +
              "]~",
            duration: 1500,
            type: "success",
          });
          // 刷新数据
          this.getData();
          this.closeEdit();
           // 传递事件-饼图组件监听后刷新数据
          this.$EventBus.$emit("pie_category_changed", undefined);
        })
        .catch((e) => {
          console.log(e);
          this.$notify({
            title: "警告:修改分类失败",
            message: e.msg,
            type: "warning",
            position: "bottom-right",
            duration: 1500,
          });
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
  data() {
    return {
      loading: false,
      categoryName: "",
      categoryNameMod: "",
      dialogAddVisible: false,
      tableData: [],
    };
  },
};
</script>
<style>
#categoryManager .el-table {
  color: #000000b8;
  font-weight: 600;
  font-size: 15px;
}

#categoryManager .el-table tr {
  background-color: #fff0;
}

#categoryManager .el-table th.el-table__cell {
  background-color: #fff0;
  border-bottom: 2px solid #d5d688 !important;
}

#categoryManager .el-table td.el-table__cell {
  border-bottom: 1px solid #ce8c5833 !important;
}

#categoryManager .el-table::before {
  height: 0px;
}

#categoryManager .el-table thead {
  color: #fb7f00cc;
  font-size: 15px;
}
</style>
